<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书管理</title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
        <script type="text/javascript" src="../js/bootstrap.bundle.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>


        <div class="container">
            <!-- 标题+添加图书按钮 -->
            <div class="header">
                <h1 class="display-6" id="title">图书管理</h1>
                <div class="button_container">
                    <button type="button" class="btn btn-primary" id="add_button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">添加+</button>
                </div>
            </div>

            
            <!-- 渲染主体 -->
            <table class="table table-hover align_table">
                <thead>
                    <tr>
                        <th width="10%"  scope="col">序号</th>
                        <th width="20%" scope="col">书名</th>
                        <th width="15%" scope="col">作者</th>
                        <th width="25%"  scope="col">出版社</th>
                        <th width="30%" scope="col">操作</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider" id="books">
                    <!-- <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td id="buttons">
                            <button type="button" class="btn btn-primary">修改</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr> -->

                </tbody>
            </table>
            
            
        </div>

<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">添加图书</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <form id="form">
        <div class="mb-3">
            <label for="bookname" class="form-label">书名</label>
            <input type="text" class="form-control" id="bookname" placeholder="请输入图书名称">
            <label for="author" class="form-label">作者</label>
            <input type="text" class="form-control" id="author" placeholder="请输入作者姓名">
            <label for="publisher" class="form-label">出版社</label>
            <input type="text" class="form-control" id="publisher" placeholder="请输入出版社名称">
        </div>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" id="reset">重置</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="OK_button">确定</button>
      </div>
    </div>
  </div>
</div>




<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel2">修改图书</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <form id="form2">
        <div class="mb-3">
            <label for="bookname" class="form-label">书名</label>
            <input type="text" class="form-control" id="bookname2" placeholder="请输入图书名称">
            <label for="author" class="form-label">作者</label>
            <input type="text" class="form-control" id="author2" placeholder="请输入作者姓名">
            <label for="publisher" class="form-label">出版社</label>
            <input type="text" class="form-control" id="publisher2" placeholder="请输入出版社名称">
        </div>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="OK_button2">确定</button>
      </div>
    </div>
  </div>
</div>









        <style>
            th, td {
                word-wrap: break-word;
                word-break: break-word;
                overflow-wrap: break-word;

            }
            .container {
                display: flex;
                flex-direction: column;
                width: 720px;
                
            }
            .header {
                display: flex;
                flex-direction: row;
            }
            #title {
                margin-top: 50px;
                margin-bottom: 20px;
            }
            .button_container {
                flex-grow: 1;
                position: relative;
            }
            #add_button {
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
            #buttons {
                display: flex;
                justify-content: space-around;
            }
            .align_table {
                text-align: center;
            }
        </style>
            
            
    </body>
    <script>
        

        const creator = "超级大帅比";

        //1是添加 2是修改
        const myModal = document.getElementById('staticBackdrop')
        const myModall = new bootstrap.Modal(myModal)
        const myModal2 = document.getElementById('staticBackdrop2')
        const myModall2 = new bootstrap.Modal(myModal2)
        const myInput = document.getElementById('bookname')
        const form = document.getElementById('form');
        
        //自动获取焦点
        myModal.addEventListener('shown.bs.modal', () => {
            myInput.focus()
        })
        myModal2.addEventListener('shown.bs.modal', () => {
            myInput.focus()
        })

        //渲染
        function getBookList(){
            axios({
                url:"https://hmajax.itheima.net/api/books",
                method: "get",
                params:{
                    creator
                }
            }).then(result => {
                 document.querySelector("#books").innerHTML = result.data.data.map((item, index) => {
                    return `<tr>
                        <th scope="row">${index + 1}</th>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td data-id="${item.id}">
                            <button type="button" class="btn btn-primary">修改</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>`
                }).join(' ');
            })
        };
        getBookList();


        //添加确定
        const OK_button = document.querySelector('#OK_button');
        OK_button.addEventListener('click', () => {
            const bookname = document.querySelector('#bookname').value;
            const author = document.querySelector('#author').value;
            const publisher = document.querySelector('#publisher').value;
            axios({
                url: 'https://hmajax.itheima.net/api/books',
                method: 'POST',
                data: {
                    bookname,
                    author,
                    publisher,
                    creator
                }
            }).then(result => {
                const form = document.querySelector('#form');
                form.reset();
                myModall.hide();
                getBookList();
            }).catch(error => {
                console.log(error);
            })
        })

        //添加时重置
        const reset = document.querySelector('#reset');
        reset.addEventListener('click', () => {
            const form = document.querySelector('#form');
            form.reset();
        })



        //删除
        const books = document.querySelector('#books');
        books.addEventListener('click', (e) => {
            // console.log(e.target);
            if(e.target.classList.contains('btn-danger')){
                const delete_book_id = e.target.parentNode.dataset.id;
                axios({
                    url: `https://hmajax.itheima.net/api/books/${delete_book_id}`,
                    method: 'DELETE'
                }).then(result => {
                    getBookList();
                })
            }
        })


        let revise_book_id;
        //修改打开
        books.addEventListener('click', (e) => {
            if(e.target.classList.contains('btn-primary')){
                myModall2.show();
                revise_book_id = e.target.parentNode.dataset.id;
                axios({
                    url: `https://hmajax.itheima.net/api/books/${revise_book_id}`,
                    method: 'GET'
                }).then(result => {
                    const {bookname,author,publisher} = result.data.data;
                    const booknameDOM = document.querySelector('#bookname2');
                    const authorDOM = document.querySelector('#author2');
                    const publisherDOM = document.querySelector('#publisher2');
                    booknameDOM.value = bookname;
                    authorDOM.value = author;
                    publisherDOM.value = publisher;
                })
            }
        })

        //修改确定
        const OK_button2 = document.querySelector('#OK_button2');
        OK_button2.addEventListener('click', () => {
            const bookname = document.querySelector('#bookname2').value;
            const author = document.querySelector('#author2').value;
            const publisher = document.querySelector('#publisher2').value;
            axios({
                url: `https://hmajax.itheima.net/api/books/${revise_book_id}`,
                method: 'PUT',
                data: {
                    bookname,
                    author,
                    publisher,
                    creator
                }
            }).then(result => {
                myModall2.hide();
                getBookList();
            }).catch(error => {
                console.log(error);
            })
        })
    </script>
</html>